<template>
  <div style="height: 60px;background-color: #fff;padding: 10px 20px;box-sizing: border-box">
    <span style="line-height: 60px;font-size: 20px">围栏地图</span>
    <el-button @click="router.push('/geofence')" type="primary" style="float: right;margin-top: 15px">返回</el-button>
  </div>
  <div id="map_container" style="height:calc(100% - 60px) ;width: 100%">

  </div>
  <el-dialog :before-close="close_dialog" title="围栏信息" v-model="dialogVisible">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input placeholder="请输入围栏名称" v-model="geofence.name"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="close_dialog">取消</el-button>
      <el-button @click="save_geofence">确定</el-button>

    </template>
  </el-dialog>

</template>
<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import { DrawScene, DrawControl ,OperateEventType} from 'bmap-draw';
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";

var map
//8)定义电子围栏对象，用于给后端新增围栏时使用
const geofence = ref({
  name:'',//围栏名称
  position:{}//围栏位置信息
})
const dialogVisible = ref(false)

//进入页面立即执行
onMounted(()=>{
  //表示在DOM更新完毕后在执行，保证在存放地图的div创建完毕后在执行
  nextTick(()=>{
    //第七步：创建地图实例（注意不要导入）
    map = new BMapGL.Map("map_container")
    //第八步：设置地图的中心点坐标的经纬度，此处是天安门
    let point = new BMapGL.Point(116.4074,39.9024)
    //第九步：给上方创建好的地图对象设置中心点与缩放级别
    map.centerAndZoom(point,16)
      //添加控件
      let scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
      map.addControl(scaleCtrl);
      let zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
      map.addControl(zoomCtrl);
      let cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
      map.addControl(cityCtrl);

    // 添加鼠标绘制控件
    //1)创建绘制场景类,本类为所有鼠标绘制控件的基类,必须先创建DrawScene类实例,注意:需要导入!
    const scene = new DrawScene(map);
    //2)在当前绘制场景下，创建绘制控件类（需要导入）
    const drawContrl = new DrawControl(scene, {
    //3)绘制控件配置项
      //3.1不显示对应绘制项的文字提示
      enableTips: false,
      //3.2设置当前绘制控件的位置（左上）
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      //3.3设置绘制控件显示哪些绘制项 circle圆形，rectangle矩形
      drawingItems: [
        'circle',
        'rectangle'
      ]
    });
    //5)监听绘制完成事件，用户点击对勾时返回触发事件的对象
    scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
      dialogVisible.value=true
      console.log(event.target)//触发事件的目标对象，即圆形或矩形围栏对象
      //6)获取触发事件对象中的overlay值，overlay代表的是圆形覆盖物
      let overlay = event.target.overlay;
      //7)判断当前绘制的图形是圆形还是方形
      if(overlay instanceof BMapGL.Circle){
        //圆形(响应式变量可动态添加属性)
        geofence.value.type='circle'//设置围栏圆形
        geofence.value.radius = overlay.getRadius()//设置围栏半径
        geofence.value.position.longitude = overlay.getCenter().lng
        geofence.value.position.latitude = overlay.getCenter().lat
      }else{
        //方形
        geofence.value.type='rectangle'
        let recPoints = []
        for(let i= 0;i<4;i++){
          recPoints.push(overlay.points[i].latLng.lng+'-'+overlay.points[i].latLng.lat)
        }
        geofence.value.position.recPoints = recPoints.join(',')//join(',') 方法的作用是将数组 recPoints 中的所有元素用逗号 , 连接成一个字符串。如果 recPoints 是 [1, 2, 3]，那么 recPoints.join(',') 的结果将是 "1,2,3"
        console.log(geofence.value)
      }


    })

    //4)将绘制控件添加到地图上
    map.addControl(drawContrl);
  })
})

const save_geofence=()=>{
  if(!geofence.value.name ||geofence.value.name.trim().length===0){
    ElMessage.error('围栏名称不能为空');
    return;
  }
  console.log(geofence.value)
  geofence.value.position=JSON.stringify(geofence.value.position)
  let data = qs.stringify(geofence.value)
  console.log(data)
  axios.post(BASE_URL+'/v1/geofence/save',data)
      .then((response)=>{
        if(response.data.code===2000){
          ElMessage.success('添加成功')
          dialogVisible.value=false
          geofence.value={name:'',position:{}}
          map.clearOverlays()
          router.push('/geofence')
        }else{
          ElMessage.error(response.data.msg)
        }
      })
}
const close_dialog = ()=>{
  if(confirm('确认要关闭吗')){
    dialogVisible.value=false
    geofence.value={name:'',position:{}}
    map.clearOverlays()
  }
}
</script>


<style scoped>

</style>